<template>
  <div class="person">
    <div class="content">
      <div class="login-title">
        <img src="@/assets/login/logo@2x.png" alt="" />
      </div>
      <div class="binding-main">
        <div class="title">个人信息</div>
        <div class="prompt">请完善个人信息</div>
        <div class="person-information">
          <!-- <div class="upload-face">
            <span>上传图片</span>
            <div
              class="demo-upload-list"
              v-for="(item, index) in uploadList"
              :key="index"
            >
              <template v-if="item.status === 'finished'">
                <img :src="item.url" />
                <div class="demo-upload-list-cover">
                  <Icon
                    type="ios-trash-outline"
                    @click.native="handleRemove(item)"
                  ></Icon>
                </div>
              </template>
              <template v-else>
                <Progress
                  v-if="item.showProgress"
                  :percent="item.percentage"
                  hide-info
                ></Progress>
              </template>
            </div>
            <Upload
              ref="upload"
              :show-upload-list="false"
              :format="['jpg', 'jpeg', 'png']"
              :max-size="2048"
              :before-upload="handleBeforeUpload"
              multiple
              type="drag"
              action
              style="display: inline-block; width: 58px"
              :style="uploadList.length == 0 ? 'margin-left:calc(20/1920*100vw)' : ''"
            >
              <div style="width: 58px; height: 58px; line-height: 58px" v-if="personInformation.face == ''">
                <Icon type="ios-camera" size="20"></Icon>
              </div>
              <div style="width: 58px; height: 58px;background-size: cover;" :style="`background-image:url(${personInformation.face})`" v-else>
              </div>
            </Upload>
          </div> -->
          <div class="input-name">
            <div class="id">
              <span>昵称</span>
            </div>
            <Input
              v-model="personInformation.nickName"
              maxlength="20"
              :border="false"
              placeholder="请输入昵称"
              style="width: 100%"
            />
          </div>
          <div class="input-sex">
            <div class="id">
              <span>性别</span>
            </div>
            <Select
              style="width: 100%"
              placement="bottom"
              @on-change="changeSex"
              clearable
            >
              <Option
                v-for="item in sexList"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </div>
          <div class="input-born">
            <div class="id">
              <span>出生日期</span>
            </div>
            <Row>
              <Col>
                <DatePicker
                  type="date"
                  placeholder="请选择"
                  style="width: 100%"
                  @on-change="changDate"
                ></DatePicker>
              </Col>
            </Row>
            <Icon type="ios-arrow-down" class="select" />
          </div>
          <div class="input-height">
            <div class="id">
              <span>身高</span>
            </div>
            <Input
              v-model="personInformation.height"
              :border="false"
              type="number"
              placeholder="请输入身高"
              maxlength="20"
              style="width: 100%"
            />
            <span class="unit">CM</span>
          </div>
          <div class="input-weight">
            <div class="id">
              <span>体重</span>
            </div>
            <Input
              v-model="personInformation.weight"
              :border="false"
              type="number"
              placeholder="请输入体重"
              maxlength="20"
              style="width: 100%"
            />
            <span class="unit">KG</span>
          </div>
          <div class="btn-list">
            <div class="back-btn" @click="backHandle">返回上一步</div>
            <div class="complete-btn" @click="completeHandle">完成</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Cookies from "js-cookie";
import { onLoadFile } from "../../api/otwoo.js";
export default {
  data() {
    return {
      sexList: [
        { value: "男", label: "男" },
        { value: "女", label: "女" },
      ],
      personInformation: {
        // face: "",
        nickName: "",
        sex: "",
        born: "",
        height: "",
        weight: "",
      },
      //头像
      imgName: "",
      visible: false,
      uploadList: [],
    };
  },
  props: ["userType"],
  mounted() {
    // this.uploadList = this.$refs.upload.fileList;
  },
  methods: {
    backHandle() {
      if(this.userType == '2'){
        this.$emit("backHandle", 2);
      }else {
        this.$emit("backHandle", 3);
      }
    },

    //完成提交
    completeHandle() {
      // for (const key in this.personInformation) {
      //   if (!this.personInformation[key]) {
      //     return this.$Message.error("必填项不能为空");
      //   }
      // }
      if(Number(this.personInformation.height)>300||Number(this.personInformation.weight)>200){
        this.$Message.error('请输入合理的身高或者体重！')
        return
      }
      this.$emit("completeHandle", {
        num: 5,
        personInformation: this.personInformation,
      });
    },

    //上传头像
    // onLoadFile(file){
    //   var formData = new FormData();
    //   formData.append('file',file);
    //    onLoadFile(formData).then((res)=>{
    //     this.personInformation.face = res.result;
    //   })
    // },

    //改变日期
    changDate(val){
      let date = new Date(val);
      let years = date.getFullYear();
      let month = date.getMonth()+1 < 10 ? '0' + (date.getMonth()+1) : date.getMonth()+1;
      let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
      this.personInformation.born = years + '-' + month + '-' + day;
      // console.log(this.personInformation.born);
    },

    // 改变性别
    changeSex(val){
      if(val === '男'){
        this.personInformation.sex = '1';
      }else{
        this.personInformation.sex = '0';
      }
      console.log( this.personInformation.sex);
    },
    //头像
    // handleView(name) {
    //   this.imgName = name;
    //   this.visible = true;
    // },
    // handleRemove(file) {
    //   const fileList = this.$refs.upload.fileList;
    //   this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
    // },
    // handleBeforeUpload(file) {
    //   const check = this.uploadList.length < 1;
    //   if (!check) {
    //     this.$Notice.warning({
    //       title: "最多只能上传一张头像",
    //     });
    //   }
    //   this.onLoadFile(file);
    //   return false;
    // },
  },
};
</script>
<style lang="scss" scoped>
.person {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: url("../../assets/login/beij@2x.png") no-repeat;
  background-size: cover;
  .content {
    width: calc(670 / 1920 * 100vw);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    .login-title {
      background-color: none;
      margin-top: calc(45 / 1920 * 100vw);
      > img {
        width: calc(390 / 1920 * 100vw);
        height: calc(40 / 1920 * 100vw);
      }
    }
    .binding-main {
      margin-top: calc(28 / 1920 * 100vw);
      width: calc(670 / 1920 * 100vw);
      border-radius: calc(10 / 1920 * 100vw);
      background: #fff;
      padding: calc(43 / 1920 * 100vw) calc(30 / 1920 * 100vw)
        calc(48 / 1920 * 100vw);
      position: relative;
      .title {
        font-size: calc(20 / 1920 * 100vw);
        color: #ea3f47;
        font-weight: bold;
        text-align: center;
      }
      .prompt {
        font-size: calc(16 / 1920 * 100vw);
        color: #535353;
        text-align: center;
        margin-top: calc(10 / 1920 * 100vw);
      }
      .person-information {
        display: flex;
        flex-direction: column;
        .upload-face {
          display: flex;
          align-items: center;
          font-size: calc(16 / 1920 * 100vw);
          color: #363636;
          margin-top: calc(26 / 1920 * 100vw);
          .add-face-btn {
            width: calc(104 / 1920 * 100vw);
            height: calc(104 / 1920 * 100vw);
            background: #ebebeb;
            border-radius: calc(4 / 1920 * 100vw);
            margin-left: calc(20 / 1920 * 100vw);
            display: flex;
            align-items: center;
            justify-content: center;
            > img {
              width: calc(34 / 1920 * 100vw);
              height: calc(31 / 1920 * 100vw);
            }
          }
        }
        .input-name,
        .input-sex,
        .input-sport,
        .input-height,
        .input-weight {
          margin-top: calc(15 / 1920 * 100vw);
          display: flex;
          align-items: center;
          height: calc(50 / 1920 * 100vw);
          background: #f7f7f7;
          border: 1px solid #ebebeb;
          border-radius: calc(4 / 1920 * 100vw);
          position: relative;
          .id {
            width: calc(100 / 1920 * 100vw);
            margin-left: calc(30 / 1920 * 100vw);
            color: #363636;
            font-size: calc(16 / 1920 * 100vw);
          }
          .unit {
            position: absolute;
            right: calc(10 / 1920 * 100vw);
            top: 50%;
            transform: translateY(-50%);
          }
        }
        .input-born {
          margin-top: calc(15 / 1920 * 100vw);
          display: flex;
          align-items: center;
          height: calc(50 / 1920 * 100vw);
          background: #f7f7f7;
          border: 1px solid #ebebeb;
          border-radius: calc(4 / 1920 * 100vw);
          position: relative;
          .id {
            width: calc(82 / 1920 * 100vw);
            margin-left: calc(30 / 1920 * 100vw);
            color: #363636;
            font-size: calc(16 / 1920 * 100vw);
          }
          .select {
            position: absolute;
            right: calc(10 / 1920 * 100vw);
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
          }
        }
        .btn-list {
          display: flex;
          align-items: center;
          margin-left: auto;
          margin-top: calc(36 / 1920 * 100vw);
          .skip-btn {
            font-size: calc(20 / 1920 * 100vw);
            color: #ea3f47;
            cursor: pointer;
          }
          .back-btn {
            border-radius: calc(4 / 1920 * 100vw);
            font-size: calc(20 / 1920 * 100vw);
            color: #ea3f47;
            cursor: pointer;
            height: calc(50 / 1920 * 100vw);
            width: calc(140 / 1920 * 100vw);
            text-align: center;
            line-height: calc(50 / 1920 * 100vw);
            border: 1px solid #ea3f47;
            margin-left: calc(24 / 1920 * 100vw);
          }
          .complete-btn {
            border-radius: calc(4 / 1920 * 100vw);
            font-size: calc(20 / 1920 * 100vw);
            height: calc(50 / 1920 * 100vw);
            width: calc(140 / 1920 * 100vw);
            text-align: center;
            line-height: calc(50 / 1920 * 100vw);
            color: #fff;
            cursor: pointer;
            background: #ea3f47;
            margin-left: calc(24 / 1920 * 100vw);
          }
        }
      }
    }
  }
}
//头像
.demo-upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
.demo-upload-list:first-of-type {
  margin-left: calc(20 / 1920 * 100vw);
}
.demo-upload-list img {
  width: 100%;
  height: 100%;
}
.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}
.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}

:deep(.ivu-input) {
  background: #f7f7f7;
  border: none;
}
:deep(.ivu-select-selection) {
  border: none;
  background: none;
  box-shadow: none;
}
:deep(.ivu-input-suffix) {
  display: none;
}
:deep(.ivu-date-picker-focused input:not([disabled])) {
  box-shadow: none;
}
:deep(.ivu-input:focus) {
  box-shadow: none;
}
</style>
